<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <base href="<%=request.getContextPath()%>/">
    <title>商品搜索</title>
    <!-- import CSS -->
    <link rel="stylesheet" type="text/css" href="static/css/vue-index.css"/>
    <style>
        /* 容器样式 */
        .product-container {
            padding: 20px;
            background-color: #f5f5f5;
            min-height: 100vh;
        }
        
        /* 搜索区域样式 */
        .search-area {
            background-color: #fff;
            padding: 20px;
            border-radius: 4px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
        }
        
        /* 过滤区域样式 */
        .filter-area {
            background-color: #fff;
            padding: 15px 20px;
            border-radius: 4px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
        }
        
        /* 商品列表样式 */
        .product-list {
            display: flex;
            flex-wrap: wrap;
            margin: 0 -10px;
        }
        
        /* 商品卡片样式 */
        .product-card {
            width: calc(25% - 20px);
            margin: 10px;
            background-color: #fff;
            border-radius: 4px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            overflow: hidden;
            transition: all 0.3s;
        }
        
        .product-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.1);
        }
        
        /* 商品图片样式 */
        .product-image {
            width: 100%;
            height: 200px;
            overflow: hidden;
            position: relative;
        }
        
        .product-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: all 0.3s;
        }
        
        .product-card:hover .product-image img {
            transform: scale(1.05);
        }
        
        /* 商品信息样式 */
        .product-info {
            padding: 15px;
        }
        
        .product-name {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 10px;
            color: #333;
            height: 40px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        
        .product-price {
            font-size: 18px;
            color: #ff6700;
            font-weight: bold;
            margin-bottom: 10px;
        }
        
        .product-spec {
            font-size: 12px;
            color: #999;
            margin-bottom: 10px;
            height: 18px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        
        /* 分页样式 */
        .pagination-area {
            display: flex;
            justify-content: center;
            margin-top: 20px;
            background-color: #fff;
            padding: 15px;
            border-radius: 4px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }
        
        /* 排序按钮样式 */
        .sort-btn {
            padding: 5px 10px;
            margin-right: 10px;
            border: 1px solid #dcdfe6;
            border-radius: 3px;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .sort-btn.active {
            color: #409eff;
            border-color: #409eff;
        }
        
        /* 热门推荐样式 */
        .hot-products {
            background-color: #fff;
            padding: 20px;
            border-radius: 4px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
        }
        
        .hot-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }
        
        /* 响应式布局 */
        @media screen and (max-width: 1200px) {
            .product-card {
                width: calc(33.33% - 20px);
            }
        }
        
        @media screen and (max-width: 768px) {
            .product-card {
                width: calc(50% - 20px);
            }
        }
        
        @media screen and (max-width: 480px) {
            .product-card {
                width: calc(100% - 20px);
            }
        }
    </style>
</head>
<body>
<div id="app" class="product-container">
    <!-- 搜索区域 -->
    <div class="search-area">
        <el-input v-model="searchForm.keyword" placeholder="请输入关键词搜索" style="width: 300px;" size="small">
            <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
        </el-input>
        <el-button type="primary" size="small" style="margin-left: 10px;" @click="search">搜索</el-button>
        <el-button size="small" @click="reset">重置</el-button>
    </div>

    <!-- 过滤区域 -->
    <div class="filter-area">
        <div style="margin-bottom: 10px;">
            <span style="margin-right: 10px; font-weight: bold;">分类：</span>
            <el-radio-group v-model="searchForm.categoryId" size="small" @change="search">
                <el-radio :label="null">全部</el-radio>
                <el-radio v-for="item in categoryList" :key="item.id" :label="item.id">{{item.name}}</el-radio>
            </el-radio-group>
        </div>
        <div style="margin-bottom: 10px;">
            <span style="margin-right: 10px; font-weight: bold;">价格：</span>
            <el-radio-group v-model="priceRange" size="small" @change="handlePriceChange">
                <el-radio :label="null">全部</el-radio>
                <el-radio label="0-100">0-100元</el-radio>
                <el-radio label="100-500">100-500元</el-radio>
                <el-radio label="500-1000">500-1000元</el-radio>
                <el-radio label="1000-5000">1000-5000元</el-radio>
                <el-radio label="5000-">5000元以上</el-radio>
            </el-radio-group>
        </div>
        <div>
            <span style="margin-right: 10px; font-weight: bold;">排序：</span>
            <span class="sort-btn" :class="{'active': searchForm.sort === 'default'}" @click="changeSort('default')">默认</span>
            <span class="sort-btn" :class="{'active': searchForm.sort === 'price_asc'}" @click="changeSort('price_asc')">价格 ↑</span>
            <span class="sort-btn" :class="{'active': searchForm.sort === 'price_desc'}" @click="changeSort('price_desc')">价格 ↓</span>
            <span class="sort-btn" :class="{'active': searchForm.sort === 'sales_desc'}" @click="changeSort('sales_desc')">销量 ↓</span>
            <span class="sort-btn" :class="{'active': searchForm.sort === 'date_desc'}" @click="changeSort('date_desc')">最新</span>
        </div>
    </div>

    <!-- 热门推荐 -->
    <div class="hot-products" v-if="showHotProducts">
        <div class="hot-title">热门推荐</div>
        <div class="product-list">
            <div class="product-card" v-for="item in hotProducts" :key="item.id" @click="goToDetail(item.id)">
                <div class="product-image">
                    <img :src="item.imageUrl || 'static/images/default-product.jpg'" alt="商品图片">
                </div>
                <div class="product-info">
                    <div class="product-name">{{item.productName}}</div>
                    <div class="product-spec">{{item.specification}}</div>
                    <div class="product-price">¥ {{item.price}}</div>
                </div>
            </div>
        </div>
    </div>

    <!-- 商品列表 -->
    <div class="product-list" v-if="productList.length > 0">
        <div class="product-card" v-for="item in productList" :key="item.id" @click="goToDetail(item.id)">
            <div class="product-image">
                <img :src="item.imageUrl || 'static/images/default-product.jpg'" alt="商品图片">
            </div>
            <div class="product-info">
                <div class="product-name">{{item.productName}}</div>
                <div class="product-spec">{{item.specification}}</div>
                <div class="product-price">¥ {{item.price}}</div>
            </div>
        </div>
    </div>
    
    <!-- 空状态 -->
    <el-empty v-if="productList.length === 0" description="暂无符合条件的商品"></el-empty>

    <!-- 分页 -->
    <div class="pagination-area" v-if="total > 0">
        <el-pagination
                :current-page.sync="searchForm.pageNum"
                :page-size.sync="searchForm.pageSize"
                :page-sizes="[12, 24, 48, 96]"
                :total="total"
                layout="total, sizes, prev, pager, next, jumper"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange">
        </el-pagination>
    </div>
</div>
</body>
<script src="static/js/owner/axios.min.js"></script>
<!-- import Vue before Element -->
<script src="static/js/owner/vue.js"></script>
<!-- import JavaScript -->
<script src="static/js/owner/vue-index.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                // 搜索条件
                searchForm: {
                    keyword: '',
                    categoryId: null,
                    minPrice: null,
                    maxPrice: null,
                    sort: 'default',
                    pageNum: 1,
                    pageSize: 12
                },
                // 价格范围
                priceRange: null,
                // 分类列表
                categoryList: [
                    {id: 1, name: '家具'},
                    {id: 2, name: '电器'},
                    {id: 3, name: '数码'},
                    {id: 4, name: '服装'},
                    {id: 5, name: '食品'}
                ],
                // 商品列表
                productList: [],
                // 热门商品
                hotProducts: [],
                // 总数
                total: 0,
                // 是否显示热门推荐
                showHotProducts: true
            }
        },
        created() {
            // 获取URL参数
            const urlParams = new URLSearchParams(window.location.search);
            const keyword = urlParams.get('keyword');
            const categoryId = urlParams.get('categoryId');
            
            if (keyword) {
                this.searchForm.keyword = keyword;
            }
            
            if (categoryId) {
                this.searchForm.categoryId = parseInt(categoryId);
            }
            
            // 初始加载数据
            this.search();
            // 加载热门商品
            this.getHotProducts();
        },
        methods: {
            // 搜索
            search() {
                this.searchForm.pageNum = 1;
                this.getProductList();
                this.showHotProducts = !this.searchForm.keyword && !this.searchForm.categoryId && 
                    !this.searchForm.minPrice && !this.searchForm.maxPrice;
            },
            
            // 重置搜索条件
            reset() {
                this.searchForm = {
                    keyword: '',
                    categoryId: null,
                    minPrice: null,
                    maxPrice: null,
                    sort: 'default',
                    pageNum: 1,
                    pageSize: 12
                };
                this.priceRange = null;
                this.search();
            },
            
            // 处理价格范围变化
            handlePriceChange() {
                if (!this.priceRange) {
                    this.searchForm.minPrice = null;
                    this.searchForm.maxPrice = null;
                } else {
                    const range = this.priceRange.split('-');
                    this.searchForm.minPrice = range[0] ? parseFloat(range[0]) : null;
                    this.searchForm.maxPrice = range[1] ? parseFloat(range[1]) : null;
                }
                this.search();
            },
            
            // 修改排序方式
            changeSort(sort) {
                this.searchForm.sort = sort;
                this.search();
            },
            
            // 获取商品列表
            getProductList() {
                axios.get('productES/searchProduct', {params: this.searchForm})
                    .then(res => {
                        if (res.data.code === 200) {
                            this.productList = res.data.extend.data.list;
                            this.total = res.data.extend.data.total;
                        } else {
                            this.$message.error(res.data.msg);
                        }
                    })
                    .catch(err => {
                        console.error(err);
                        this.$message.error('获取商品列表失败');
                    });
            },
            
            // 获取热门商品
            getHotProducts() {
                axios.get('productES/getHotProducts', {params: {size: 4}})
                    .then(res => {
                        if (res.data.code === 200) {
                            this.hotProducts = res.data.extend.list;
                        }
                    })
                    .catch(err => {
                        console.error(err);
                    });
            },
            
            // 跳转到商品详情
            goToDetail(id) {
                window.location.href = 'product/detail/' + id;
            },
            
            // 处理页码变化
            handleCurrentChange(pageNum) {
                this.searchForm.pageNum = pageNum;
                this.getProductList();
            },
            
            // 处理每页条数变化
            handleSizeChange(pageSize) {
                this.searchForm.pageSize = pageSize;
                this.search();
            }
        }
    });
</script>
</html> 